<template>
  <div class="resource-type-item">
    <div class="type-header">{{ info.resourceTotal }}（{{ totalCount }}张）</div>
    <div id="total" class="item-main"></div>
  </div>
</template>

<script>
  import { defineComponent, ref, toRefs, watch } from 'vue';
  import * as echarts from 'echarts';
  import { useI18n } from '@common/locales';
  export default defineComponent({
    name: 'ResourceTotal',
    props: {
      totalData: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const t = useI18n().t;
      watch(
        () => props.totalData,
        (newProps) => {
          methods.initEcharts(newProps);
        },
      );
      let totalCount = ref(0); //资源总数
      const state = {
        info: {
          resourceTotal: t('resourceBoard.resourceTotal'),
        },
      };
      const methods = {
        initEcharts(echartData) {
          let totalDom = document.getElementById('total');
          var myEchart = echarts.init(totalDom);
          myEchart.clear();
          echartData.forEach((item) => {
            totalCount.value += parseInt(item.count);
            item.value = item.count;
            item.name = `${item.SY_CREATEUSERNAME} ${item.count}`;
          });
          let option = {
            tooltip: {
              trigger: 'item',
              // formatter: '{b}',
              formatter: function (params) {
                let sourceData = params.data;
                if (sourceData.accountCode) {
                  return `${sourceData.SY_CREATEUSERNAME}(${sourceData.accountCode}) ${sourceData.value}`;
                } else {
                  return `${sourceData.SY_CREATEUSERNAME} ${sourceData.value}`;
                }
              },
            },
            series: [
              {
                type: 'pie',
                radius: '68%',
                center: ['50%', '50%'],
                data: echartData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
            ],
          };
          option && myEchart.setOption(option);
          // window.addEventListener('resize', () => {
          //   myEchart.resize();
          // });
        },
      };
      return {
        totalCount,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .resource-type-item {
    width: calc((100% - 40px) / 3);
    height: 370px;
    background: #fff;
    border-radius: 4px;
    .type-header {
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      font-size: 16px;
      // font-family: 'PingFang SC, PingFang SC-Normal';
      font-weight: bold;
      color: #3f3f3f;
      box-sizing: border-box;
      border-bottom: 1px solid #e6e6e6;
    }
    .item-main {
      width: 100%;
      height: 310px;
    }
  }
</style>
